<template>
  <div>
    <el-popover :placement="info.extension.placement.value" :trigger="info.extension.trigger.value" :width="info.extension.popoverWidth.value">
      <template #reference>
        <div
          :class="[
            'p-' + info.extension.padding.value,
            info.extension.border.value,
            info.extension.rounded.value,
            info.extension.colorBg.value,
            info.extension.fontWeight.value,
          ]"
          :style="[{ fontSize: info.extension.fontSize.value, color: info.extension.colorText.value }]"
        >
          <vui-icon v-if="info.extension.icon.value" :icon="info.extension.icon.value" />
          <span>{{ info.extension.textContent.value }}</span>
        </div>
      </template>
      <!-- 内容模块 -->
      <div
        :class="[info.extension.contentBgColor.value, info.extension.contentFontWeight.value]"
        :style="[{ color: info.extension.contentTextColor.value, fontSize: info.extension.contentFontSize.value }]"
      >
        {{ info.extension.popoverText.value }}
      </div>
    </el-popover>
  </div>
</template>
<script>
  import { defineComponent } from 'vue'
  import { UiMixin } from '@ve/mixin'
  export default defineComponent({
    name: 'UiPopover',
    mixins: [UiMixin],
    computed: {},
  })
</script>
